<template>
  <div class="home">
    <div class="userBox">
      <van-row>
        <van-col span="4"><van-image round
                     width="60px"
                     height="60px"
                     src="https://img01.yzcdn.cn/vant/cat.jpeg" /></van-col>
        <van-col span="15">
          <p class="companyNumber">
            8577A00010000
          </p>
          <p class="companyName">
            温州天心天思代理机构
          </p>
        </van-col>
        <van-col span="2"
                 offset="2"><van-icon class="SET_BUTTONS"
                    name="setting-o"
                    @click="toSet()" /></van-col>
      </van-row>
      <!--  -->
    </div>
    <div class="agent">
      <div class="agentTop">
        <div>合作代理商</div>
        <div class="text">代理到期日:<span>2030-11-10</span></div>
      </div>
      <div class="agentBottom">
        <van-row>
          <van-col span="13">
            <div>18900.00</div>
            <div class="text">余额</div>
          </van-col>
          <van-col span="11">
            <div>3900.00</div>
            <div class="text">代金券</div>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="list"
         @click="toPlaceOrder()">
      <van-icon class="iconColor"
                name="balance-list-o" />
      <span>要货下单</span>
      <van-icon name="arrow" />
    </div>
    <div class="list"
         @click="toUserSave()">
      <van-icon class="iconColor"
                name="manager-o" />
      <span>客户备案</span>
      <van-icon name="arrow" />
    </div>
    <div class="client-list">
      <van-row>
        <van-col span="12">
          <van-icon class="iconColor"
                    @click="toClient()"
                    name="friends-o" />
          <div class="text">客户</div>
          <div class="text-small">18</div>
        </van-col>
        <van-col span="12">
          <van-icon class="iconColor"
                    @click="toOrderContract()"
                    name="label-o" />
          <div class="text">订单/合同</div>
          <div class="text-small">12</div>
        </van-col>
      </van-row>
    </div>
    <div class="Test-Operator">
      <div class="text">产品操作</div>
      <van-row class="icon">
        <van-col @click="toProductOperate()"
                 span="8"><van-icon name="cluster" />
          <div>清机器码</div>
        </van-col>
        <van-col span="8"><van-icon name="clock" />
          <div>调整使用期</div>
        </van-col>
        <van-col span="8"><van-icon name="warning" />
          <div>紧急授权</div>
        </van-col>
      </van-row>
      <van-row class="icon">
        <van-col span="8"><van-icon name="play-circle" />
          <div>启用</div>
        </van-col>
        <van-col span="8"><van-icon name="stop-circle" />
          <div>停用</div>
        </van-col>
        <van-col span="8"></van-col>
      </van-row>
    </div>
  </div>

</template>

<script>
export default {
  methods: {
    toSet () {
      this.$router.push({
        path: '/setting',
        query: {
        }
      })
    },
    toUserSave () {
      this.$router.push({
        path: '/userSave',
        query: {
        }
      })
    },
    toPlaceOrder () {
      this.$router.push({
        path: '/placeOrder',
        query: {
        }
      })
    },
    toClient () {
      this.$router.push({
        path: '/clientRelations',
        query: {
        }
      })
    },
    toOrderContract () {
      this.$router.push({
        path: '/orderContract',
        query: {
        }
      })
    },
    toProductOperate () {
      this.$router.push({
        path: '/productoperate',
        query: {
        }
      })
    }
  }
}
</script>
<style  lang="less">
.home {
  width: 315px;
  height: 929px;
  padding: 34px 30px;
  background-image: linear-gradient(to bottom, #abc1d4, #dde0e3);
  // background-image: url("@/assets/background/indexBgc.png");
  .userBox {
    margin-top: 20px;
    // background: red;
    .companyNumber {
      font-weight: 600;
      font-size: 16px;
      margin: 12px 10px 0px -18px;
    }
    .companyName {
      font-size: 14px;
      margin: 0 0 0 -10px;
    }
    .SET_BUTTONS {
      font-size: 22px;
      margin-top: 10px;
      cursor: hand;
    }
  }
  .agent {
    margin-top: 10px;
    font-size: 20px;
    text-align: left;
    .agentBottom {
      padding: 16px;
      background-color: #4d5869;
      border-radius: 0 0 22px 22px;
      color: aliceblue;
      .text {
        font-size: 14px;
      }
    }
    .agentTop {
      padding: 16px;
      background-color: #3e495c;
      border-radius: 22px 22px 0 0;
      color: aliceblue;
      .text {
        color: #bbbbbb;
        font-size: 14px;
      }
    }
  }
  .list {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    margin: 20px 0;
    padding: 20px 10px 20px 24px;
    background-color: #fff;
    border-radius: 22px 22px 22px 22px;
    height: 60px;
    .iconColor {
      font-size: 24px;
      color: #ff5e5e;
      margin-right: 15px;
    }
    span {
      margin-right: 100px;
      font-size: 18px;
    }
  }
  .client-list {
    background-color: #fff;
    border-radius: 0 0 22px 22px;
    padding: 25px;
    font-size: 18px;
    height: 80px;
    .iconColor {
      font-size: 36px;
      color: #3f495c 89%;
      margin-bottom: 5px;
    }
    .text-small {
      color: #999999 100%;
      font-size: 14px;
    }
  }
  .Test-Operator {
    font-weight: 550;
    font-size: 14px;
    text-align: left;
    padding: 25px;
    padding-top: 20px;
    margin-top: 30px;
    background-color: #fff;
    border-radius: 22px;
    height: 180px;
    .icon {
      text-align: center;
      margin-top: 30px;
      .van-icon {
        color: #ff5e5e;
        font-size: 28px;
        margin-bottom: 5px;
      }
      div {
        font-weight: normal;
        font-size: 12px;
      }
    }
  }
}
</style>